<template>
  <div id="asiderBar">
    <el-scrollbar style="height: 100%" v-show="true">
      <div class="ns-tree-com tree-com" >
        <el-input
          placeholder="输入关键字进行过滤"
          size="small"
          v-model="filterText"
        >
        </el-input>
        <el-tree
          class="filter-tree"
          :data="meauData"
          :props="defaultProps"
          show-checkbox

          :filter-node-method="filterNode"
          node-key="id"
          @check="handleCheckChange"
          ref="tree">
          <div class="custom-node" slot-scope="{node, data}">
            <div class="node-left">
              <span style="margin-left: 0px;" >{{data.parent.catalogName}}</span>
            </div>
          </div>
        </el-tree>
      </div>
    </el-scrollbar>
    <el-scrollbar style="height: 100%"  v-show="false" >
      <div class="ns-tree-com tree-com" >
        <el-input
          placeholder="输入关键字进行过滤"
          size="small"
          v-model="filterText"
        >
        </el-input>
        <el-tree
          :data="sanweidata"
          show-checkbox
          node-key="id"
          :default-checked-keys="[4]"
          :props="defaultProps2"
          id="sanweitree"
          @check="handleCheckChange2"
        >
        </el-tree>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import  eventBus from '../../assets/js/eventBus'
  export default {
    name: 'mapLeft',
    data() {
      return {
        filterText: '',
        meauData: [],
        defaultProps: {
          children: 'children',
          label: 'catalogName'
        },
        sanweidata:[{id:1,label:'生态保护红线'},{id:2,label:'环境质量底线'},{id:3,label:'资源利用上线'},{id:4,label:'环境管控单元'}],
        defaultProps2: {
          children: 'children',
          label: 'label'
        }
      };
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    created () {
      this.getMapMeau()
    },
    mounted(){
      eventBus.$on('clearTree',(mes)=>{
        if(mes=='clear'){
        }
      })
    },
    methods: {
      async handleCheckChange(data, checked) {
        var gxdata=[],cxmldata=[], yijimul='';
        if(this.$refs.tree.getCheckedNodes().length!=0){
          yijimul=this.$refs.tree.getCheckedNodes()[0].parent.code.substring(0,1);
        }
        var erjimul='';var dyData=[];
        for(let x=0;x<this.$refs.tree.getCheckedNodes().length;x++){

          if(this.$refs.tree.getCheckedNodes()[x].children.length==0){
            cxmldata.push(this.$refs.tree.getCheckedNodes()[x].parent.id);
          }
          if(this.$refs.tree.getCheckedNodes()[x].parent.code=='41'){
            gxdata.push(21);
            dyData.push(41)
          }else if(this.$refs.tree.getCheckedNodes()[x].parent.code=='42'){
            gxdata.push(21);
            dyData.push(42)
          }else if(this.$refs.tree.getCheckedNodes()[x].parent.code=='43'){
            gxdata.push(21);
            dyData.push(43)
          }
           else {
            if(this.$refs.tree.getCheckedNodes()[x].children.length==0){
              gxdata.push(this.$refs.tree.getCheckedNodes()[x].parent.id);

            }
          }

        }
        for(let i=0;i<this.$refs.tree.getCheckedNodes().length;i++){
          if(this.$refs.tree.getCheckedNodes()[i].children.length==0){
            erjimul=this.$refs.tree.getCheckedNodes()[i].parent.catalogName;
            break;
          }
        }
        gxdata=[...new Set(gxdata)];
        cxmldata=[...new Set(cxmldata)];
        //const { data: res } = this.$http.get('/api/v1.0/resultIntegration/findAll');
        var fileName=[];
        const {data:result}= await this.$http.post('/v1.0/resultIntegration/achievements/dataPresentation/findAllByCatalogIdAndAchievementsTypeIds',{achievementsTypeId:1,catalogIds:gxdata})
        for(let i=0;i<result.data.length;i++) {
          if(result.data[i].files.length==0){

          }else {
            for(let index in result.data[i].files){
              if(result.data[i].files[index].fileName.substring(result.data[i].files[index].fileName.lastIndexOf("."),result.data[i].files[index].length)=='.shp'){
                fileName.push(result.data[i].files[index].fileName.substring(0, result.data[i].files[index].fileName.lastIndexOf(".")));
              }
            }

            if(dyData.indexOf(41)>-1){
              fileName.push('优先')
            }
            if(dyData.indexOf(42)>-1){
              fileName.push('重点')
            }
            if(dyData.indexOf(43)>-1){
              fileName.push('一般')
            }
           /* if(result.data[i].catalogId==22){
              fileName.push('优先')
              fileName.push(result.data[i].files[0].fileName.substring(0, result.data[i].files[0].fileName.lastIndexOf(".")));
            }else if(result.data[i].catalogId==23){
              fileName.push('重点')
              fileName.push(result.data[i].files[0].fileName.substring(0, result.data[i].files[0].fileName.lastIndexOf(".")));
            }else if(result.data[i].catalogId==24){
              fileName.push('一般')
              fileName.push(result.data[i].files[0].fileName.substring(0, result.data[i].files[0].fileName.lastIndexOf(".")));
            }else {
              fileName.push(result.data[i].files[0].fileName.substring(0, result.data[i].files[0].fileName.lastIndexOf(".")));
            }*/
          }
        }
        fileName=Array.from(new Set(fileName))
        //var fileName=res.data[0].files[0].fileName.substring(0,res.data[0].files[0].fileName.lastIndexOf("."))
        /*var fileName=['NRKey32','AtomsKeyLayoutSensitive32','NRKeyHighPolluFuelForbid32','HydroKeyAngriculture32','AtomsPriority32','EcoRedline32']*/
        eventBus.$emit('fname',fileName)
        eventBus.$emit('muluID',cxmldata)
        //console.log(fileName)
        /*eventBus.$emit('yijimulu',yijimul)
        eventBus.$emit('erjimulu',erjimul)*/
      },
      handleNodeClick(data) {
        console.log(this.$refs.tree.getCheckedNodes());
      },
      filterNode(value, data2) {
        if (!value) return true;
        return data2.parent.catalogName.indexOf(value) !== -1;
      },
      async getMapMeau () {
        const { data: res } = await this.$http.get('/v1.0/resultIntegration/achievements/dataPresentation/catalog/findAllCatalog')
        if (res.status !== '3000') {
          return this.$message.error(res.message)
        }
        this.meauData=res.data;
        this.meauData.push({
          parent:{
            catalogName:'支持数据服务',
            code:'999',
            id:999,
            level:1,
            upLevelId: 0,
            keyCode:''
          },
          children:[{
            parent:{
              catalogName:'奎独乌联防联控区',
              code:'9990',
              id:9990,
              level:2,
              upLevelId: 0,
              keyCode:''
            },
            children:[],
          },{
            parent:{
              catalogName:'乌昌石联防联控区',
              code:'99901',
              id:99901,
              level:2,
              upLevelId: 0,
              keyCode:''
            },
            children:[],
          },{
            parent:{
              catalogName:'河流断面',
              code:'9991',
              id:9991,
              level:2,
              upLevelId: 0,
              keyCode:''
            },
            children:[],
          },{
            parent:{
              catalogName:'湖库',
              code:'9992',
              id:9992,
              level:2,
              upLevelId: 0,
              keyCode:''
            },
            children:[],
          },{
            parent:{
              catalogName:'监测站点',
              code:'9993',
              id:9993,
              level:2,
              upLevelId: 0,
              keyCode:''
            },
            children:[],
          },{
            parent:{
              catalogName:'重点监管企业',
              code:'9994',
              id:9994,
              level:2,
              upLevelId: 0,
              keyCode:''
            },
            children:[],
          }]
        })
        console.log(this.meauData)
        /* var newData;
         for(var item in res.data){
           console.log(res.data)
           newData={id:res.data[item].parent.id,label:res.data[item].parent.catalogName,children:res.data[item].children}
           this.meauData.push(newData);
           console.log(this.meauData)
         }*/
      },
      handleCheckChange2(data, checked){
        console.log(data)
        console.log(checked)
      }
    },

  }
</script>

<style lang="less" scoped>
  ::v-deep.el-scrollbar .el-scrollbar__wrap {overflow-x: hidden;}
  #asiderBar{
    position: absolute;
    width: 18%;
    top: 9.5%;
    bottom: 1.5%;
    left: 1%;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: auto;
    box-shadow: 0 0 5px #acc4fe;
  }
  .ns-tree-com.tree-com{
    padding:8px;

    .el-tree{
      padding-top: 20px;
      padding-left: 0px;
      background-color:#fff;

      .el-tree-node{
        position: relative;
        padding: 222px;
        .el-tree-node__content{
          padding: 30px !important;
        }
      }
      .el-tree-node__children{
        padding-left: 12px;
        span{
          font-size: 14px;
          color: #a5b1ad;
        }
      }
    }
    .custom-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 18px;
      padding-right: 8px;
      color: #4b4e53;
      font-weight: bold;
      .node-right{
        display: none;
      }
    }
  }
  .el-tree /deep/ .el-tree-node__content:hover{
    //background-color: #7b98bc;
  }
  /deep/ .el-tree-node__content{
    padding-top: 3px;
  }
  /deep/ #sanweitree{
    /deep/ .el-tree-node__label{
      align-items: center;
      justify-content: space-between;
      font-size: 18px;
      padding-right: 8px;
      color: #4b4e53;
      font-weight: bold;
    }
  }
</style>
